<template>
    <span @click="scrollToTop()" class='upbox animated delay-2s slower ' style="position: fixed;
        top: 70%;
        right: 1%;
        cursor: pointer;
        height: 3rem;
        width: 3rem;
        border-radius: 2px;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        z-index:9;
       background: rgb(242, 243, 239);
       overflow:hidden;" :style='hidden'>
        <i class="iconfont icon-pinglun upBtn hvr-Fade" style="font-size:15px;color:black;"></i>

    </span>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";

export default {
    name: "commitBtn",
    components: {},
    data() {
        return {
            isShow: false,
            time:'',
            hidden:''
        };
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true);
    },
    methods: {
        ...mapActions(["getGrxx", "checkLogin", "logout", "getPermissions"]),
        handleScroll() {
            this.hidden = ''
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if (scroll < 0) {
                this.isShow = false
            } else {
                this.isShow = true
            }
        },
        scrollToTop() {
            const returnEle = document.querySelector("#blog_commit");
            if (!!returnEle) {
                returnEle.scrollIntoView(true);
            }
        },
        scrollAnimation(currentY, targetY) {
            // 获取当前位置方法
            // const currentY = document.documentElement.scrollTop || document.body.scrollTop
            // 计算需要移动的距离
            let needScrollTop = targetY - currentY
            let _currentY = currentY
            setTimeout(() => {
                // 一次调用滑动帧数，每次调用会不一样
                const dist = Math.ceil(needScrollTop / 10)
                _currentY += dist
                window.scrollTo(_currentY, currentY)
                // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
                if (needScrollTop > 10 || needScrollTop < -10) {
                    this.scrollAnimation(_currentY, targetY)
                } else {
                    window.scrollTo(_currentY, targetY)
                }
            }, 1)
        },
    },
    computed: {
        ...mapGetters(["isLogin", "user", "progress"])
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/common.less";
@keyframes movetoup {
    0% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1.2);
    }

    51% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.1);
    }
}

.upbox {
    // &:hover .upBtn {
    //     animation: movetoup 1.5s infinite !important;
    // }
}

.upBtn {
    font-size: 18px;
    color: #f78286;
    top: -114%;
    position: absolute;
}

.img_content {
    height: 320px;
    width: 100%;
    justify-content: center;
    display: flex;
    img {
        height: 100%;
        width: auto;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
}
</style>
